<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<title>刮刮卡制作</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				width: 100%;
				height: 100%;
			}
			#wrap > #oc{
				position: absolute;
				left: 0;
				top: 0;
				transition: 1s;
			}
			#wrap > ul{
				width: 100%;
				height: 100%;
			}
			#wrap > ul > li{
				width: 100%;
				height: 100%;
				background: url(pic/bj.jpg)no-repeat;
				background-size: 100% 100%;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oc = document.getElementById("oc")
				oc.width = document.documentElement.clientWidth
				oc.height = document.documentElement.clientHeight
				console.log(oc.height)
				if(oc.getContext){
					var ctx = oc.getContext("2d")
					var img = new Image()
					img.src="pic/qj.jpg"
					img.style.backgroundSize = "100% 100%"
					img.onload = function(){
						draw()
					}
					
					
				}
				
				function draw(){
					var flag = 0
					ctx.drawImage(img,0,0,oc.width,oc.height)
					/* 放出来当公共样式 */
					ctx.globalCompositeOperation="destination-out"
					ctx.lineWidth=20
					ctx.lineCap="round"
					ctx.lineJoin="round"
					oc.addEventListener("touchstart",function(event){
						event = event || window.event
						/* 获取到第一手指 */
						var touches = event.changedTouches[0]
						var x = touches.clientX - oc.offsetLeft
						var y = touches.clientY - oc.offsetTop
						
						ctx.save()
						ctx.beginPath()
						/* ctx.arc(x,y,20,0,360*Math.PI/180) */
						ctx.moveTo(x,y)
						ctx.lineTo(x+1,y+1)
						ctx.stroke()
						ctx.restore()

						
					})
					
					oc.addEventListener("touchmove",function(event){
						event = event || window.event
						/* 获取到第一手指 */
						var touches = event.changedTouches[0]
						var x = touches.clientX - oc.offsetLeft
						var y = touches.clientY - oc.offsetTop
						ctx.save()
						/* ctx.arc(x,y,20,0,360*Math.PI/180) */
						/* 这边不能加moveTO */
						ctx.lineTo(x+1,y+1)
						ctx.stroke()
						ctx.restore()
					
						
					})
					oc.addEventListener("touchend",function(){
						var imgdata = ctx.getImageData(0,0,oc.width,oc.height)
						var allpx = imgdata.width * imgdata.height
						console.log(allpx)
						for(var i=0;i<imgdata.data.length;i++){
							if(imgdata.data[4*i+3] == 0){
								flag++
							}
						}
						
						if(flag >= allpx /2){
							oc.style.opacity = 0
							oc.addEventListener("transitionend",function(){
								oc.remove()
							})
						}
						
					
						
					})
				}
			}
		</script>
	</head>
	<body>
		<div id="wrap">
			<canvas id="oc"></canvas>
			<ul>
				<li>
					
				</li>
			</ul>
		</div>
	</body>
</html>
